<template>
    <div class="production animated bounceInUp">
        <ul>
            <li class="production_list" v-for="item in productionList" :key="item.id"
                :style="{backgroundImage:'url('+item.picUrl+')'}">
                <a class="mask" :href="item.link" target="_blank">
                    <p class="showHeader">{{item.title}}</p>
                    <p class="link">点击查看</p>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "production",
        data() {
            return {
                productionList: [
                    {
                        id: 1,
                        title:"百度",
                        picUrl: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3560178334,433140778&fm=26&gp=0.jpg",
                        link: "https://www.baidu.com/"
                    },
                    {
                        id: 2,
                        title:"新浪",
                        picUrl: "https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1237073680,3011531534&fm=26&gp=0.jpg",
                        link: "https://www.sina.com.cn/"
                    },
                    {
                        id: 3,
                        title:"腾讯",
                        picUrl: "http://img2.imgtn.bdimg.com/it/u=3014381775,3320584749&fm=26&gp=0.jpg",
                        link: "https://www.qq.com/"
                    }
                    ,
                    {
                        id: 4,
                        title:"头条",
                        picUrl: "http://img3.imgtn.bdimg.com/it/u=3474164667,3913008232&fm=26&gp=0.jpg",
                        link: "https://www.toutiao.com/"
                    },
                    {
                        id: 5,
                        title:"美团",
                        picUrl: "http://img5.imgtn.bdimg.com/it/u=3411935245,280207420&fm=26&gp=0.jpg",
                        link: "https://www.meituan.com/"
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
    .production {
        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .production_list {
                width: 300px;
                height: 200px;
                margin: 20px 0;
                background-size: 100% 100%;
                .mask{
                    display: block;
                    width: 100%;
                    height: 20%;
                    background-color: rgba(0,0,0,0.5);
                    transition: height 1s;
                    overflow: hidden;
                    &:hover{
                        height: 100%;
                    }
                    .showHeader{
                        text-align: center;
                        line-height: 40px;
                        color: white;
                        font-size: 20px;
                    }
                    .link{
                        color: white;
                        line-height: 120px;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>